<template>
    <a-modal title="关联jira issue" :bodyStyle="{ padding: 0, height: '400px' }" centered v-model:visible="visible" :width="600" v-if="visible">
        <div style="padding: 32px">
            <a-form layout="inline">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="issue">
                            <h-search-select-cell
                                type="jira"
                                label="summary"
                                keyField="id"
                                :searchQuery="{
                                    empId: userInfo.employeeDTO.empId,
                                    systemId: detailData.system,
                                    issueType: type == 1 ? '故事' : null,
                                }"
                                @success="handleSelectChange"
                            >
                                <template #label="{ record }"> {{ record.issueKey }}——{{ record.summary }} </template>
                            </h-search-select-cell>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <template #footer>
            <flexbox justify="flex-end" class="btn-group">
                <a-button @click="visible = false">取消</a-button>
                <a-button type="primary" @click="handleSubmit" :disabled="!checkedData.id">关联</a-button>
            </flexbox>
        </template>
    </a-modal>
</template>

<script lang="ts">
import { HSearchSelectCell } from '@/components';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HSearchSelectCell
    },
    emits: ['success'],
    setup(_, { emit }) {
        const state = reactive<Recordable>({
            visible: false,
            detailData: {},
            checkedData: {},
            type: 2 //产品需求还是业务需求
        });
        const open = (detailData, type = 2) => {
            state.detailData = detailData;
            state.visible = true;
            state.type = type;
        };
        const handleSubmit = () => {
            emit('success', state.checkedData);
            state.visible = false;
        };
        // 通用选择回调
        const handleSelectChange = (val) => {
            if (val.id) {
                state.checkedData = { ...val };
            }
        };
        return {
            ...toRefs(state),
            open,
            handleSubmit,
            handleSelectChange
        };
    }
});
</script>